<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<view class="header">
			<u-search style="padding: 30upx; background-color: #4fc08d;" placeholder="输入关键词搜索微信群"
				v-model="searchData.keyword" @change="searchHandle" :action-style="{color: '#FFFFFF'}">
			</u-search>
			</u-search>
			<u-dropdown style="background-color: #ffffff">
				<u-dropdown-item v-model="searchData.area" :title="areaTitle" :options="areaOptions"
					@change="areaChange" height="1000upx">
				</u-dropdown-item>
				<u-dropdown-item v-model="searchData.sex" :title="sexTitle" :options="sexOptions" @change="sexChange">
				</u-dropdown-item>
				<u-dropdown-item v-model="searchData.screen" :title="screenTitle" :options="screenOptions"
					@change="screenChange">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="wrap">
			<!-- 有swiper、swiper-item，拉到底的时候，搜索才不会消失在界面中 -->
			<swiper class="swiper-box">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore"
						lower-threshold="10upx">
						<view class="page-box">
							<view class="order" v-for="(item, index) in itemList" :key="item.id">
								<view class="item">
									<view class="left">
										<image :src="item.wxUrl.substr(0, 4) === 'http'? item.wxUrl:(baseUrl+item.wxUrl)"
											mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="box">
											<view class="test">
												<view class="title u-line-2" style="display: flex;">
													<view v-if="item.topDate"
														style="background-color: #f4e076; color: red; width: 100upx; margin-right: 10upx;">
														↑ 置顶
													</view>
													{{ item.nickName }}
												</view>
												<view class="number">
													{{ item.summary }}
												</view>
											</view>
											<view class="right">
												<u-button class="join" :type="getBtnType(item)"
													@click="joinHandle(item)">
													{{getBtnDesc(item)}}
												</u-button>
											</view>
										</view>
									</view>
								</view>
							</view>
							<u-loadmore v-if="itemList.length>=10" :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup class="qrcode" v-model="show" mode="bottom" :closeable="true" border-radius="30">
			<view class="title" style="font-size:40upx ;margin-top: 40upx; text-align: center;">扫码加群</view>
			<view style="height: 600upx; border-radius: 30upx; margin: 30upx 100upx; ">
				<u-image style="height: 100%; width: 100%;" mode="widthFix" :src="erweima">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		API_URL
	} from '@/env'

	export default {
		data() {
			return {
				baseUrl: API_URL,

				loadStatus: 'loadmore',
				curPage: 0,
				itemList: [],
				show: false, //弹出层
				erweima: '../../static/qun.png',

				searchData: {
					keyword: "",
					area: null,
					sex: null,
					screen: null
				},
				areaTitle: "区域",
				sexTitle: "性别",
				screenTitle: "筛选",
				areaOptions: [{
						label: '不限',
						value: null,
					},
					{
						label: '北京市',
						value: 11,
					},
					{
						label: '天津市',
						value: 12,
					},
					{
						label: '河北省',
						value: 13,
					},
					{
						label: '山西省',
						value: 14,
					},
					{
						label: '内蒙古自治区',
						value: 15,
					},
					{
						label: '辽宁省',
						value: 21,
					},
					{
						label: '吉林省',
						value: 22,
					},
					{
						label: '黑龙江省',
						value: 23,
					},
					{
						label: '上海市',
						value: 31,
					},
					{
						label: '江苏省',
						value: 32,
					},
					{
						label: '浙江省',
						value: 33,
					},
					{
						label: '安徽省',
						value: 34,
					},
					{
						label: '福建省',
						value: 35,
					},
					{
						label: '江西省',
						value: 36,
					},
					{
						label: '山东省',
						value: 37,
					},
					{
						label: '河南省',
						value: 41,
					},
					{
						label: '湖北省',
						value: 42,
					},
					{
						label: '湖南省',
						value: 43,
					},
					{
						label: '广东省',
						value: 44,
					},
					{
						label: '广西壮族自治区',
						value: 45,
					},
					{
						label: '海南省',
						value: 46,
					},
					{
						label: '重庆市',
						value: 50,
					},
					{
						label: '四川省',
						value: 51,
					},
					{
						label: '贵州省',
						value: 52,
					},
					{
						label: '云南省',
						value: 53,
					},
					{
						label: '西藏自治区',
						value: 54,
					},
					{
						label: '陕西省',
						value: 61,
					},
					{
						label: '甘肃省',
						value: 62,
					},
					{
						label: '青海省',
						value: 63,
					},
					{
						label: '宁夏回族自治区',
						value: 64,
					},
					{
						label: '新疆维吾尔自治区',
						value: 65,
					},
					{
						label: '台湾',
						value: 66,
					},
					{
						label: '香港',
						value: 67,
					},
					{
						label: '澳门',
						value: 68,
					}
				],
				sexOptions: [{
						label: '不限',
						value: null,
					},
					{
						label: '男',
						value: 1,
					},
					{
						label: '女',
						value: 0,
					},
				],
				screenOptions: [{
						label: '不限',
						value: null,
					},
					{
						label: '已查看',
						value: true,
					},
					{
						label: '未查看',
						value: false,
					},
				],
			};
		},
		onShow() {
			if (this.itemList.length == 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			getBtnType(item) {
				if (this.$store.state.user.userInfo.userId &&
					item.userId == this.$store.state.user.userInfo.userId) {
					return "primary"
				}
				if (item.status == 1) {
					return "error"
				}
				if (item.isAlreadySee) {
					return "warning"
				} else {
					return "success"
				}
			},
			getBtnDesc(item) {
				if (this.$store.state.user.userInfo.userId &&
					item.userId == this.$store.state.user.userInfo.userId) {
					return "我的"
				}
				if (item.status == 1) {
					return "免费"
				}
				if (item.isAlreadySee) {
					return "已查看"
				} else {
					return "加好友"
				}
			},
			/**
			 * 点击加入
			 */
			joinHandle(item) {
				if (item.cloudUrl) {
					this.show = true
					this.erweima =item.cloudUrl.substr(0, 4) === 'http'? item.cloudUrl: (this.baseUrl + item.cloudUrl)
					return
				}
				this.$api.apiPath('personalCard.seeQrcode', "/" + item.id)
					.then(res => {
						console.log("进入信息", res)
						if (res.code == 200) {
							this.show = true
							this.erweima = res.data.cloudUrl.substr(0, 4) === 'http'? res.data.cloudUrl:(this.baseUrl + res.data.cloudUrl)
						} else {

						}
					})
			},
			/**
			 * 搜索
			 * @param {Object} keyword
			 */
			searchHandle(keyword) {
				this.keyword = keyword
				this.refresh()
			},
			//区域变更
			areaChange(value) {
				for (let i = 0; i < this.areaOptions.length; i++) {
					if (this.areaOptions[i].value == value) {
						this.areaTitle = this.areaOptions[i].label
						break
					}
				}
				this.refresh()
			},
			//性别变更
			sexChange(value) {
				for (let i = 0; i < this.sexOptions.length; i++) {
					if (this.sexOptions[i].value == value) {
						this.sexTitle = this.sexOptions[i].label
						break
					}
				}
				this.refresh()
			},
			//筛选变更
			screenChange(value) {
				for (let i = 0; i < this.screenOptions.length; i++) {
					if (this.screenOptions[i].value == value) {
						this.screenTitle = this.screenOptions[i].label
						break
					}
				}
				this.refresh()
			},
			/**
			 * 跳转路由
			 * @param {Object} url
			 */
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.itemList = []
				this.curPage = 0
				this.loadStatus = 'loadmore'
				this.loadMore()

			},
			/**
			 * 获取几天前
			 */
			getTime(dateStr) {
				return this.$tools.getTimeInterval(new Date(dateStr).getTime(), new Date().getTime())
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.loadStatus == 'nomore') {
					return
				}
				//加载中
				this.loadStatus = 'loading';
				let page = this.curPage + 1
				this.$api.api('personalCard.list', {
						"keyword": this.searchData.keyword,
						"regionValue": this.searchData.area,
						"region": this.areaTitle === "不限" || this.areaTitle === "区域" ? null : this.areaTitle,
						"sex": this.searchData.sex,
						"screen": this.searchData.screen,
						"pageNum": page,
						"pageSize": 10,
						"orderByColumn": "createTime",
						"isAsc": "descending"
					})
					.then(res => {
						if (res.code == 200) {
							this.itemList = this.itemList.concat(res.rows)
							if (res.total > this.itemList.length) {
								this.loadStatus = 'loadmore';
								this.curPage++;
							} else {
								this.loadStatus = 'nomore';
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})
			},
			//删除
			deleteHandle(id) {
				this.$api.apiPath('qunQrcode.delete', "/" + id)
					.then(res => {
						console.log("进入信息", res)
						if (res.code == 200) {
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f8f8f8;
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.order {
		width: 710rpx; //宽度
		background-color: #ffffff;
		margin: 20rpx auto; //上下间距
		border-radius: 20rpx; //倒角
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				width: 90%;

				.box {
					display: flex;

					.test {
						width: 80%;

						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.number {
							margin: 10rpx 0;
							font-size: 24rpx;
							color: $u-tips-color;
						}
					}

					.right {
						width: 10%;
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;

						.join {
							width: 120rpx;
							height: 70rpx;
						}
					}
				}

			}


		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		touch-action: none;
	}

	.swiper-item {
		height: 100%;
		touch-action: none;
	}
</style>
